<template>
	<view>
		<view class="cardBox" >
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao" style="width: 100%;display: flex;">
					<span class="biao_span">|</span> 
					<text class="cardTitle">{{text.order_no}} : {{order.orderInfo.order_no}}</text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<view class="cardTitle" style="font-size: 28rpx;margin-top: 10rpx;">{{text.order_type}} : {{order_type}}</view>	
			</view>
		
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao" style="width: 100%;display: flex;">
					<span class="biao_span">|</span> 
					<text class="cardTitle">{{text.close_reason||''}} </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<view style="line-height: 60rpx;">
					<block v-if="lang==='zh'">{{order.orderInfo.close_reason||''}}</block>
					<block v-if="lang==='ru'">{{order.orderInfo.close_reason_ru||''}}</block>
				</view>
				
				<view style="width: 100%;">
					<image v-for="(item,index) in img" :key="index" :src="item" class="close_image2"></image>
				</view>
				<view style="clear: both;"></view>
			</view>
			
			
			<view style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<text style="font-weight: bold;font-size:32rpx;">{{text.submit_user}} </text>
				<view class="flex">
					<image :src="cooperation.img" class="close_image2"></image>
					<view style="line-height: 140rpx;">{{cooperation.name}} </view>
				</view>
			</view>
			<view class="flex" style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<view v-if="is_stop==0" style="width: 50%;float: left; text-align: left;" >
					{{timestampToDate(order.orderInfo.close_reason_time*1000)}}
				</view>
				
				<view v-if="is_stop==1" style="width: 50%;float: left; text-align: left;" >
					{{timestampToDate(order.orderInfo.terminate_transaction_time*1000)}}
				</view>
				
				<!-- <view v-if="is_close_user" style="width: 50%;float: right; text-align: right; color: #ff2323;" >
					{{text.automatic_agree}}
				</view> -->
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	
	export default {
		components: {
			
		},
		props:{
			order:{
				type:Object,
				default:{}
			},
			is_close_user:{
				type:Boolean,
				default:true
			},
			is_stop:{
				type:Number,
				default:0
			},
			text:{
				type:Object,
				default:{}
			},
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				order_type:'',
				//语言
				lang: this.$i18n.locale,

				img:[],
				cooperation:{
					name:'',img:''
				}
			}
		},
		mounted() {
			if(this.order.orderInfo.type=='goods'){
				this.order_type=this.$t('货物')
			}else if(this.order.orderInfo.type=='transport'){
				this.order_type=this.$t('运输')
			}else if(this.order.orderInfo.type=='crossborder'){
				this.order_type=this.$t('跨境货代')
			}else if(this.order.orderInfo.type=='professional'){
				this.order_type=this.$t('专业代办')
			}
			
			var images = this.order.orderInfo.close_reason_img
			var img = []
			if(images){
				var arr = images.split(',')
				for(var i=0;i<arr.length;i++){
					img.push(this.IMAGE_URL+arr[i])
				}
			}
			this.img = img
			if(this.is_stop==0){
				var do_user_id = this.order.orderInfo.close_user_id
			}else{
				var do_user_id = this.order.orderInfo.terminate_user_id
			}
			console.log(do_user_id)
			if(do_user_id==this.order.release_user.id){
				this.cooperation.img = this.IMAGE_URL+this.order.release_user.avatar
				if(this.lang==='zh'){
					this.cooperation.name = this.order.release_user.username
				}else{
					this.cooperation.name = this.order.release_user.username_ru	
				}
			
			}else{
				this.cooperation.img = this.IMAGE_URL+this.order.join_user.avatar
				if(this.lang==='zh'){
					this.cooperation.name = this.order.join_user.username
				}else{
					this.cooperation.name = this.order.join_user.username_ru	
				}
			}
			
			
		},
		methods:{
			timestampToDate(timestamp) {
			  const date = new Date(timestamp); // 如果timestamp是数值，可以直接作为Date构造函数的参数
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cardBox {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 30rpx;
		position: relative;
	}
	.flex{width: 100%;display: flex;}
	.biao{margin-top: 0rpx; width: 80%; margin-left: 0rpx;font-size: 30rpx;  font-weight: bold;}
	.biao_span{color:darkorange ; font-size: 18px; margin-right: 5px;}
	.cardTitle{font-size: 24rpx; width: 94%;padding-top: 6rpx;}
	.order_img{width: 160rpx;height: 160rpx;border-radius: 20rpx;}
	.close_image2{
		width: 160rpx;height: 160rpx;border-radius: 20rpx; margin-right: 20rpx; margin-top: 20rpx; float: left;
	}
</style>